<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>2025年10月10日黄历</title>
    <script src="../js/html2canvas.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            padding: 2vw 4vw;
            background-color: #f9f5eb;
            background-image:
                linear-gradient(90deg, transparent 28px, #e8e2d2 28px, #e8e2d2 30px, transparent 30px),
                linear-gradient(#f9f5eb 28px, #e8e2d2 28px, #e8e2d2 30px, #f9f5eb 30px);
            background-size: 100% 30px;
            font-family: "Noto Serif SC", "Microsoft YaHei", serif;
            padding-right: 120px;
            min-height: 100vh;
        }

       .func-buttons {
            position: fixed;
            right: 4vw;
            top: 50%;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 15px;
            z-index: 100;
        }

       .func-btn {
            width: 52px;
            height: 52px;
            border-radius: 50%;
            border: none;
            background-color: #d4af37;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
            box-shadow: 0 3px 10px rgba(212, 175, 55, 0.3);
            transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
            display: flex;
            align-items: center;
            justify-content: center;
        }

       .func-btn:hover {
            background-color: #b89420;
            transform: scale(1.1);
            box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
        }

       .func-btn:active {
            transform: scale(1.05);
        }

       .lunar-card {
            max-width: 500px;
            margin: 0 auto;
            background-color: #fff;
            border-radius: 16px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
            overflow: hidden;
            font-size: 16px;
            border: 1px solid #f0e9d8;
            position: relative;
        }

       .lunar-card:before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, #d4af37, #f0d060, #d4af37);
        }

       .card-header {
            background-color: #fff8e8;
            color: #8b5a2b;
            padding: 24px;
            text-align: center;
            border-bottom: 1px dashed #f0e9d8;
        }

       .card-header h1 {
            font-size: 1.8em;
            font-weight: 700;
            margin-bottom: 12px;
            letter-spacing: 2px;
        }

       .card-header p {
            font-size: 1.1em;
            opacity: 0.9;
            color: #a67c52;
        }

        /* 黄历解释摘要样式 */
       .lunar-summary {
            background-color: #fffdf0;
            padding: 20px;
            border-top: 1px dashed #f0e9d8;
            color: #795548;
            line-height: 1.7;
            margin: 10px;
            border-radius: 12px;
        }

       .lunar-summary h2 {
            font-size: 1.2em;
            color: #8b5a2b;
            margin-bottom: 10px;
            border-bottom: 1px solid #f0e9d8;
            padding-bottom: 8px;
        }

       .card-content {
            display: grid;
        }

       .content-item {
            background-color: #fffbf5;
            border-radius: 12px;
            margin: 10px;
            padding: 16px;
            border-left: 5px solid #d4af37;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
            transition: transform 0.3s ease;
        }

       .content-item:hover {
            transform: translateY(-5px);
        }

       .content-item h3 {
            font-size: 1.1em;
            color: #8b5a2b;
            border-bottom: 1px solid #f0e9d8;
            padding-bottom: 10px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
        }

       .content-item h3::before {
            content: "•";
            color: #d4af37;
            font-size: 1.5em;
            margin-right: 8px;
        }

       .content-item ul {
            color: #5d4037;
            font-size: 0.9em;
            line-height: 1.8;
            margin-bottom: 15px;
            padding-left: 22px;
        }

       .content-item ul li {
            margin-bottom: 6px;
        }

       .analysis {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 1px dashed #f0e9d8;
            color: #795548;
            font-size: 0.85em;
            line-height: 1.7;
            white-space: normal;
            word-wrap: break-word;
            background-color: #fffdf8;
            padding: 12px;
            border-radius: 8px;
        }

       .item-yi {
            border-left-color: #4caf50;
        }

       .item-yi h3 {
            color: #2e7d32;
        }

       .item-yi h3::before {
            color: #4caf50;
        }

       .item-yi ul {
            color: #2e7d32;
        }

       .item-ji {
            border-left-color: #f44336;
        }

       .item-ji h3 {
            color: #c62828;
        }

       .item-ji h3::before {
            color: #f44336;
        }

       .item-ji ul {
            color: #c62828;
        }

        @media (max-width: 500px) {
            body {
                padding-right: 80px;
                padding: 2vw;
            }

           .func-btn {
                width: 45px;
                height: 45px;
                font-size: 18px;
            }

           .card-content {
                padding: 20px;
            }

           .content-item {
                padding: 16px;
            }

           .card-header h1 {
                font-size: 1.5em;
            }

           .lunar-summary {
                padding: 16px;
            }
        }
    </style>
</head>

<body>
    <div class="func-buttons">
        <button class="func-btn" id="zoomInBtn">+</button>
        <button class="func-btn" id="zoomOutBtn">-</button>
        <button class="func-btn" id="exportBtn">📷</button>
    </div>

    <div class="lunar-card" id="lunarCard" contenteditable="true">
        <div class="card-header">
            <h1>2025年10月10日黄历</h1>
            <p>星期五 | 农历八月十九</p>
        </div>

        <div class="card-content">
            <div class="content-item">
                <h3>干支与冲煞</h3>
                <ul>
                    <li>干支：乙巳年 乙酉月 壬子日</li>
                    <li>日冲：冲丙午马（煞南）</li>
                    <li>彭祖百忌：壬不汲水 子不问卜</li>
                </ul>
                <div class="analysis">
                    白话文解析：当天生肖属马的人需注意避忌；南方方向气场不稳定，重要活动建议避开南方；不宜取水（如打井、大量挑水），也不适合占卜问卦，否则可能影响事务顺遂或导致信息偏差。
                </div>
            </div>
            <div class="content-item item-yi">
                <h3>宜</h3>
                <ul>
                    <li>祭祀</li>
                    <li>祈福</li>
                    <li>求嗣</li>
                    <li>开光</li>
                    <li>出行</li>
                    <li>解除</li>
                </ul>
                <div class="analysis">
                    白话文解析：当天适合进行祭祀祖先、祈求福运、求子、神像开光、外出出行、解除禁忌（如解除符咒、化解不利）等事宜，有助于提升事务的顺利度与吉祥气场。
                </div>
            </div>
            <div class="content-item item-ji">
                <h3>忌</h3>
                <ul>
                    <li>嫁娶</li>
                    <li>开市</li>
                    <li>安葬</li>
                    <li>破土</li>
                    <li>修坟</li>
                    <li>安门</li>
                </ul>
                <div class="analysis">
                    白话文解析：当天不适合举办婚礼、开业经营、安葬逝者、挖掘土地（如建房奠基）、修缮坟墓、安装门户等事宜，传统观念认为此类活动易受当日气场影响，可能导致不利结果。
                </div>
            </div>
            <div class="content-item">
                <h3>吉神凶煞</h3>
                <ul>
                    <li>吉神：天恩、四相、福生、金匮</li>
                    <li>凶煞：河魁、五虚、八风、九空、地贼、五离</li>
                </ul>
                <div class="analysis">
                    白话文解析：吉神代表当日有天恩眷顾、四季调和、福气滋生、利于财库等吉利因素；凶煞则意味着可能遭遇阻碍、虚空不实、风雨干扰、财物损耗等不利情况，行事需谨慎规划，避免冒进。
                </div>
            </div>

            <!-- 黄历解释摘要移至最后 -->
            <div class="lunar-summary">
                <h2>什么是黄历？</h2>
                <p>黄历，又称“皇历”“通书”，是中国传统民俗文化的重要载体，源于古代历法与天文观测，融合了阴阳五行、天干地支、节气时令等知识。其核心功能是标注日期对应的干支、宜忌、冲煞、吉神凶煞等信息，最初用于指导农耕、祭祀、婚嫁等日常事务与重大活动的时间选择。</p>
                <p>黄历中的“宜”“忌”基于传统民俗经验与术数观念，“冲煞”则与生肖地支的相生相克理论相关，“吉神凶煞”是对当日气场的传统解读。现代黄历更多作为传统文化载体存在，其建议需结合实际情况理性看待，不宜完全迷信。</p>
            </div>
        </div>
    </div>

    <script>
        const lunarCard = document.getElementById('lunarCard');
        const zoomInBtn = document.getElementById('zoomInBtn');
        const zoomOutBtn = document.getElementById('zoomOutBtn');
        const exportBtn = document.getElementById('exportBtn');

        let currentFontSize = 16;
        const fontSizeStep = 2;
        const minFontSize = 12;
        const maxFontSize = 24;

        zoomInBtn.addEventListener('click', () => {
            if (currentFontSize < maxFontSize) {
                currentFontSize += fontSizeStep;
                lunarCard.style.fontSize = `${currentFontSize}px`;
            }
        });

        zoomOutBtn.addEventListener('click', () => {
            if (currentFontSize > minFontSize) {
                currentFontSize -= fontSizeStep;
                lunarCard.style.fontSize = `${currentFontSize}px`;
            }
        });

        exportBtn.addEventListener('click', () => {
            html2canvas(lunarCard, {
                backgroundColor: null,
                scale: 2,
                useCORS: true
            }).then(canvas => {
                const link = document.createElement('a');
                link.href = canvas.toDataURL('image/png');
                link.download = `2025年10月10日黄历.png`;
                link.click();
            });
        });
    </script>
</body>
</html>